import React, { Component } from "react";
import styles from "./goodssop.module.scss";
import GoodsList from "./goodslist/goodslist";
import ShopDetails from "./goodslist/shopdetails";
import { Redirect, Route } from "react-router-dom";
export default class goodsShop extends Component {

  state={
    img:[{
      img_id:1,
      img_name:"爱国者导弹，射程2000公里，威力半径30公里，牛批666，",
      img_url:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2772517525,71614813&fm=26&gp=0.jpg"
    },
    {
      img_id:2,
      img_name:"东风导弹21号，中国重器，威力大，",
      img_url:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=249147008,2903968421&fm=26&gp=0.jpg"
    },
    {
      img_id:3,
      img_name:"东风导弹21号，中国重器，威力大，",
      img_url:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=249147008,2903968421&fm=26&gp=0.jpg"
    },
    {
      img_id:4,
      img_name:"东风导弹21号，中国重器，威力大，",
      img_url:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=249147008,2903968421&fm=26&gp=0.jpg"
    },
    {
      img_id:5,
      img_name:"东风导弹21号，中国重器，威力大，",
      img_url:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=249147008,2903968421&fm=26&gp=0.jpg"
    },
  ]
  }
  goBack=()=>{
    this.props.history.go(-1)
  }

  GoToGoodlist=()=>{
    this.props.history.push("/goodsshop/goodslist")
    document.querySelector(".goods").style.color="red"
    document.querySelector(".shops").style.color="#b9a5ce"

  };
  GoToShopdetails=()=>{
    this.props.history.push("/goodsshop/shopdetails")
    document.querySelector(".shops").style.color="red"
    document.querySelector(".goods").style.color="#b9a5ce"
    
  };
  render() {
    return (
      <div className={styles.shop}>
        <div className={styles.shopheader}>
          <div className={styles.topLeft} onClick={this.goBack}> &lt;</div>
          <div className={styles.shopdetails}>
            <div className={styles.shopdetailsLeft}> 店铺logo</div>
            <div className={styles.shopdetailsRight}>
              <h3>时尚礼貌旗舰店</h3>
              <p> 关注的人 12503人 </p>
              <span>关注</span>
            </div>
          </div>
        </div>
        <div className={styles.shopfooter}>
          <div className={styles.shopfooterTop}>
            <p  style={{color:'red'}}   className="goods" onClick={this.GoToGoodlist}>商品列表</p>
            <p  className="shops" onClick={this.GoToShopdetails}>店铺详情</p>
          </div>
          <div className={styles.shopfooterButtom}>
            <Route
              path="/goodsshop/goodslist"
              render={(props) => 
                <GoodsList img={this.state.img} {...props}></GoodsList>
              }
            ></Route>
            <Route
              path="/goodsshop/shopdetails"
              render={(props) => 
                <ShopDetails {...props}></ShopDetails>
              }
            ></Route>
            <Redirect to="/goodsshop/goodslist"></Redirect>




            {/* <GoodsList></GoodsList> */}
          </div>
        </div>
      </div>
    );
  }
}
